import React, { useEffect, useState } from 'react'
import { Button, Row, Col, Image, Typography, Empty, Tabs, Spin, Statistic, Tooltip, message } from 'antd'
import Header from '@/components/header/header'
import ListItem from '@/components/list-item/list-item'
import {
  EnvironmentOutlined,
  IdcardOutlined,
  ManOutlined,
  WomanOutlined,
  MobileOutlined
} from '@ant-design/icons'
import messageModel from 'pages/model/message'
import articlesModel from '../model/articles'
import UserFans from '../user-fans'
import UserFollowers from '../user-followers'
import userInfoModel from '../model/user-info'
import { useRouter } from 'next/router'
import { storage } from '@/utils/utils'
import { useImmer } from 'use-immer'
import styles from '@/styles/userInfo.module.scss'
import noData from '@/public/images/no-data.svg'
const { Title } = Typography
const { TabPane } = Tabs

function UserInfo () {
  const router = useRouter()
  const [releaseListData, setReleaseListData] = useImmer([])
  const [likeListData, setLikeListData] = useImmer([])
  const [collectlistData, setCollectListData] = useImmer([])
  const [commentListData, setCommentListData] = useImmer([])
  const [userInfo, setUserInfo] = useState()
  const [loading, setLoading] = useState(false)
  const [defaultActiveKey, setDefaultActiveKey] = useState('6')
  const [updateStatus, setUpdateStatus] = useState(false)

  const { id } = router.query

  useEffect(() => {
    setLoading(true)
    if (JSON.parse(storage.get('next_blog_userInfo'))?.id === Number(id)) router.prefetch('/my-info')
    if (id) {
      userInfoModel.getUserInfoDeatil({
        data: {
          id,
          loginId: JSON.parse(storage.get('next_blog_userInfo'))?.id
        }
      }).then(({datas}) => {
        if (datas) {
          setUserInfo(datas)
          setLoading(false)
        }
      })
    }
  }, [id, updateStatus])
  useEffect(() => {
    id && articlesModel.getArticlePageList({
      data: {
        id
      }
    }).then(({datas}) => {
      if (datas && datas.list) {
        datas.list.length && datas.list.forEach(item => {
          if (item.userId === Number(id)) setReleaseListData(data => {
            data.push(item)
          })
          if (item.likeStatus) setLikeListData(data => {
            data.push(item)
          })
          if (item.collectStatus) setCollectListData(data => {
            data.push(item)
          })
          if (item.commentStatus) setCommentListData(data => {
            data.push(item)
          })
        })
      }
    })
  }, [id])
  const replaceUserRelationship = (userId, status) => {
    if (status === 0) {
      messageModel.addMessage({
        data: {
          userId,
          loginId: JSON.parse(storage.get('next_blog_userInfo'))?.id,
          type: 1
        }
      }).then(data => {
        console.log(data)
      })
    }
    userInfoModel.replaceUserRelationship({
      data: {
        id: userId,
        loginId: JSON.parse(storage.get('next_blog_userInfo'))?.id,
        status: status === 1 ? 0 : 1
      }
    }).then(data => {
      if (data.success) {
        message.success(data.message)
        setUpdateStatus(!updateStatus)
      }
    })
  }
  const onTabClick = (key) => {
    setDefaultActiveKey(key)
  }
  return (
    <div className={styles.page}>
      <Header />
      <Spin spinning={loading}>
        {
          userInfo ? <>
            <Row justify="center" style={{marginTop: 25}}>
              <Col span={16}>
                <div className={styles.info_box} >
                  <Image preview={false} style={{objectFit: 'cover'}} width="100%" height={240} src={userInfo.coverUrl}></Image>
                  <div style={{height: 94, margin: 24, marginLeft: 220}}>
                    <Title level={2}>{userInfo.username}</Title>
                    <div className={styles.info}>
                      <span className={styles.item}><EnvironmentOutlined></EnvironmentOutlined> {userInfo.city}</span>
                      <span className={styles.item}><IdcardOutlined /> {userInfo.job}</span>
                      <span className={styles.item}>{userInfo.gender === '女' ? <WomanOutlined /> : <ManOutlined />} {userInfo.gender}</span>
                      <span className={styles.item}><MobileOutlined /> {userInfo.iphone.substr(0, 3) + '****' + userInfo.iphone.substr(7)}</span>
                    </div>
                    <Tooltip key="btn" title={userInfo.isFollowers === 1 ? '取消关注' : '关注Ta'}><Button style={{background: '#8590a6', borderColor: '#8590a6', width: 110, height: 34}} className={styles.btn} onClick={() => replaceUserRelationship(id, userInfo.isFollowers)}  type="primary" >{userInfo.isFollowers === 1 ? '已关注' : '关注'}</Button></Tooltip>
                    
                  </div>
                  <div style={{position: 'absolute', bottom: 25, left: 25, width: 160, height: 160}}>
                    <Image width={160} preview={false} height={160} style={{border: '4px solid #fff', borderRadius: 10}} src={userInfo.avatar}> </Image>
                  </div>
                  
                </div>
              </Col>
            </Row>
            <Row justify="center">
              <Col span={16}>
                <div className={styles.content}>
                  <div className={styles.left}>
                    <Tabs defaultActiveKey="1">
                      <TabPane tab="发布" key="1">
                        {releaseListData.length > 0 ?
                          <>
                            {releaseListData.map((item, index) => <ListItem key={index} data={item} />)}
                          </>
                          :
                          <Empty
                          // 这是个坑 noData是一个对象 {src, height, width}
                            image={noData.src}
                            imageStyle={{
                              height: 100,
                            }}
                            description={
                              <span style={{color: '#808795'}}>暂无数据</span>
                            }
                          >
                          </Empty>
                        }
                      </TabPane>
                      <TabPane tab="点赞" key="2">
                        {likeListData.length > 0 ?
                          <>
                            {likeListData.map((item, index) => <ListItem key={index} data={item} />)}
                          </>
                          :
                          <Empty
                          // 这是个坑 noData是一个对象 {src, height, width}
                            image={noData.src}
                            imageStyle={{
                              height: 100,
                            }}
                            description={
                              <span style={{color: '#808795'}}>暂无数据</span>
                            }
                          >
                          </Empty>
                        }
                      </TabPane>
                      <TabPane tab="收藏" key="3">
                        {collectlistData.length > 0 ?
                          <>
                            {collectlistData.map((item, index) => <ListItem key={index} data={item} />)}
                          </>
                          :
                          <Empty
                          // 这是个坑 noData是一个对象 {src, height, width}
                            image={noData.src}
                            imageStyle={{
                              height: 100,
                            }}
                            description={
                              <span style={{color: '#808795'}}>暂无数据</span>
                            }
                          >
                          </Empty>
                        }
                      </TabPane>
                      <TabPane tab="评论" key="4">
                        {commentListData.length > 0 ?
                          <>
                            {commentListData.map((item, index) => <ListItem key={index} data={item} />)}
                          </>
                          :
                          <Empty
                          // 这是个坑 noData是一个对象 {src, height, width}
                            image={noData.src}
                            imageStyle={{
                              height: 100,
                            }}
                            description={
                              <span style={{color: '#808795'}}>暂无数据</span>
                            }
                          >
                          </Empty>
                        }
                      </TabPane>
                      <TabPane tab="关注" key="5" style={{padding: '0 25px'}} >
                        <Tabs defaultActiveKey="6" destroyInactiveTabPane={true} activeKey={defaultActiveKey} onTabClick={onTabClick}  type="card" tabBarGutter={15} size="small">
                          <TabPane tab={userInfo.gender === '男' ? '他关注的人' : '她关注的人'} key="6">
                            <UserFollowers id={id} ></UserFollowers>
                          </TabPane>
                          <TabPane tab={userInfo.gender === '男' ? '关注他的人' : '关注她的人'} key="7">
                            <UserFans id={id}></UserFans>
                          </TabPane>
                        </Tabs>
                      </TabPane>
                    </Tabs>
                  </div>
                  <div className={styles.right}>
                    <div className={styles.number}>
                      <Statistic title="粉丝" value={userInfo.followersTotal} />
                    </div>
                    <div className={styles.number}>
                      <Statistic title="关注" value={userInfo.fansTotal} />
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
          </>
            :
            <div style={{marginTop: 80}}></div>
        }
        
      </Spin>
    </div>
  )
}

export default  UserInfo